<template>
    <div>
      <div class="bg-white grid-content">
        <el-form :inline="true" :model="bbyjhForm" class="demo-form-inline">
            <el-date-picker  style="top:15px"
                v-model="value1"
                type="daterange"
                value-format='yyyy-MM-dd'
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                unlink-panels>
                </el-date-picker>
          <el-form-item>
            <el-button type="primary" @click="reload">查询</el-button>
            <el-button type="success" @click="exportExcel">下载</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="bg-white grid-content">
        <div style="overflow: hidden">
          <div class="mytitle">
            <svg-icon icon-class="bbyjhForm" class="myIcon" />
            泵保养计划数据 
          </div>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" :header-cell-style="{background:'#F5F7FA',color:'#909399'}" border stripe>
            <el-table-column fixed align="center" type="index" label="序号" :index="indexMethod" width="60">
            </el-table-column>
            <el-table-column align="center" prop="jlid" label="保养记录号"  >
            </el-table-column>
            <el-table-column align="center" prop="orgName" label="机构名称">
          </el-table-column>
          <el-table-column align="center" prop="pumpName" label="泵名称">
          </el-table-column>
            <el-table-column align="center" prop="ksrq" label="开始日期" width="100">
            </el-table-column>
            <el-table-column align="center" prop="wcrq" label="完成日期" width="100">
            </el-table-column>
            <el-table-column align="center" prop="bygs" label="保养工时">
            </el-table-column>
            <el-table-column align="center" prop="cxdw" label="承修单位">
            </el-table-column>
            <el-table-column align="center" prop="ljyxsj" label="累计运行时间">
          </el-table-column>
            <el-table-column align="center" prop="jgsj" label="间隔时间">
            </el-table-column>
            <el-table-column align="center" prop="byyy" label="保养原因">
            </el-table-column>
            <el-table-column align="center" prop="zyxlnr" label="主要修理内容">
            </el-table-column>
            <el-table-column align="center" prop="byfzr" label="保养负责人">
            </el-table-column>
            <el-table-column align="center" prop="ysr" label="验收人">
            </el-table-column>
            <el-table-column align="center" prop="bz" label="备注">
            </el-table-column>
          </el-table>
        <!-- 分页器 -->
        <el-pagination
          align="right"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[5, 10, 20, 30, 40, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
  
      <!-- 弹出框 -->
    </div>
  </template>
    
  <script>
  import bbyjhApi from '@/api/jcsj/scgl/bsj/bbyjh';
  import Bolb from "@/vendor/Blob";
  import Export2Excel from "@/vendor/Export2Excel";
  import XLSX from "xlsx-style";
  export default {
    data() {
      return {
        pageNo: 1, //当前页码
        pageSize: 10, //每页显示数量
        total: 0, //总数量
        tableData: [],
        startDate: "",
        endDate: "",
        // table数据
  
        //当前页码
        currentPage: 1,
        //表单填报的数据
        bbyjhForm: {
          jlid:'',
          bid:'',//泵ID
          ksrq:'',
          wcrq:'',//班次
          bygs:'',//运行状态
          cxdw: '',//开机时间
          ljyxsj: '',//停机时间
          jgsj: '',//耗电量
          byyy:'',//排量
          zyxlnr: '',//停机时间
          byfzr: '',//耗电量
          ysr:'',//排量
          bz: '',//备注
          approveStatus:'',
          approveBz:'',
        },
        //时间快捷选择
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [
            {
              text: "今天",
              onClick(picker) {
                picker.$emit("pick", new Date());
              },
            },
            {
              text: "昨天",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                picker.$emit("pick", date);
              },
            },
            {
              text: "一周前",
              onClick(picker) {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", date);
              },
            },
          ],
        },
        value1: "",
        //获取当前日期
        currentTime: "",
        //编辑框是否显示
        dialogFormVisible: false,
        //弹出框是否是查看
        ischeck: false,
        //控制查看时不可更改数据
        isInput: false,
        //弹出框标题
        myDialogTitle: "",
      };
    },
    created() {
      this.search();
      //this.getDataRq();
      this.reload();
      //this.exportExcel();
    },
    mounted() {
      this.filterTime();
      // this.initDate();
    },
    methods: {
      /**
       * 查询列表
       */
        async search() {
        //发送查询请求
        let res = await bbyjhApi.List(this.pageNo,this.pageSize,this.startDate,this.endDate);
        //判断是否成功
        if(res.success){
            console.log("泵保养计划数据 ");
          console.log(res.data);
          //this.jgid = res.data.records.jgid
          //赋值
          this.tableData = res.data.records;
          //总数量
          this.total = res.data.total;
        }
      },
  
      exportExcel() {
        require.ensure([], () => {
          const { export_json_to_excel } = require("@/vendor/Export2Excel"); //此处把路径要写对
          // //简单表格书写
  
          //复杂表头书写
          //添加表格id
          var myindex = [];
          for (var i = 0; i < this.total; i++) {
            myindex[i] = i + 1;
          }
          var newindex = myindex.map((item) => {
            console.log(item);
            return {
              index: item,
            };
          });
          // //将添加的序号加入到表格中形成新的mergeArr表格
          let mergeArr = [newindex, this.tableData].reduce((prev, curr) => {
            return prev.map((item, index) => {
              return Object.assign(item, curr[index]);
            });
          });
          console.log("mergeArr", mergeArr);
          console.log("tableData", this.tableData);
  
          // const tHeader = ['日期', '姓名', '地址'];
          // // 上面设置Excel的表格第一行的标题
          //一级表头
          const multiHeader = [
            [
              " 泵保养计划数据 ",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
              "",
            ],
          ];
          //二级表头
          const header = [
            "序号",
            "保养记录号",
            "机构名称",
            "泵名称",
            "开始日期",
            "完成日期",
            "保养工时",
            "承修单位",
            "累计运行时间",
            "间隔时间",
            "保养原因",
            "主要修理内容",
            "保养负责人",
            "验收人",
            "备注",
          ];
          //表头字段
          const filterVal = [
            "index",
            "jlid",
            "orgName",
            "pumpName",
            "ksrq",
            "wcrq",
            "bygs",
            "cxdw",
            "ljyxsj",
            "jgsj",
            "byyy",
            "zyxlnr",
            "byfzr",
            "ysr",
            "bz",
          ];
          //需要合并的单元格
          const merges = ["A1:O1"];
          //表头样式
          let headerStyle = [
            "A1",
            "B1",
            "C1",
            "D1",
            "E1",
            "F1",
            "G1",
            "H1",
            "I1",
            "J1",
            "K1",
            "L1",
            "M1",
            "N1",
            "O1",
          ];
          // 上面的index、nickName、name是tableData里对象的属性
          console.log(this.tableData);
          // const list = this.tableData;  //把data里的tableData存到list
          // const data = this.formatJson(filterVal, list);
          const list = mergeArr;
          const data = this.formatJson(filterVal, list);
          console.log(111111);
          console.log(list);
          console.log(data);
  
          export_json_to_excel({
            //header: tHeader,
            multiHeader: multiHeader,
            header: header,
            merges: merges,
            headerStyle: headerStyle,
            data: data,
            filename: "泵保养计划数据 ",
            autoWidth: true,
            bookType: "xlsx",
          }); //"列表excel"  是下载后的表名 可修改
          this.$message.success("导出报表成功！");
        });
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map((v) => {
          return filterVal.map((j) => v[j]);
        });
      },
  
      // //每页条数改变时触发 选择一页显示多少行
      // handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      //   this.currentPage = 1;
      //   this.pageSize = val;
      // },
      // //当前页改变时触发 跳转其他页
      // handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      //   this.currentPage = val;
      // },
      /*** 当每页数量发生变化时触发该事件 */
      handleSizeChange(size) {
        console.log(size);
        this.pageSize = size;
        //将每页显示的数量交给成员变量
        this.search(this.pageNo, size);
      },
      /*** 当页码发生变化时触发该事件 */
      handleCurrentChange(page) {
        console.log(page);
        this.pageNo = page;
        //调用查询方法
        this.search(page, this.pageSize);
      },
      // 序号计算
      indexMethod(index) {
        // index默认在0开始，这里+1
        return index + 1 + (this.pageNo - 1) * this.pageSize;
      },
      // 获取当前日期
      filterTime() {
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
        this.currentTime = y + "-" + m + "-" + d;
      },
      //日期查询点击事件
      reload() {
        this.tableData = [];
  
        console.log(1010);
        console.log(this.value1[0]); //value1[0] 开始时间 value1[1] 结束时间
        this.startDate = this.value1[0];
        this.endDate = this.value1[1];
        this.search();
        //  console.log(this.value1[0]);
        //this.$refs.table.reload({ page: 1 });
      },
    },
  };
  </script>
    
  <style lang="scss" scoped>
  // 标题
  .mytitle {
    font-size: large;
    padding-left: 10px;
    margin-bottom: 16px;
    float: left;
  }
  
  //按钮组
  .myButtons {
    float: right;
  }
  
  //格子的样式
  .bg-white {
    background: #ffffff;
  }
  
  .grid-content {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
  }
  
  .calendar ::v-deep .el-button-group::before {
    display: none;
  }
  
  .calendar ::v-deep .el-button-group::after {
    display: none;
  }
  
  // 分割线样式
  .el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
  }
  
  // 表单各项的样式
  .el-form-item {
    margin: 15px 10px 15px 10px;
  }
  
  //表单禁用字体样式
  .el-input.is-disabled ::v-deep .el-input__inner {
    color: #606266;
  }
  //对话框宽度
  // .customWidth{
  //         width:80%;
  //     }
  ::v-deep .saveAsDialog {
    width: 60% !important;
  }
  </style>